<template>
  <div class="title-01" :style="{backgroundColor:backgroundColor}">
    <div class="rs-input-box" :style="{ color: color, fontSize: fontSize }">
      <i :class="iconName" class="rs-icon-box"></i>
      <input :style="inputStyle" v-model.lazy="inputValue" />
    </div>

    <div class="btn-box" v-if="showTool" >
      <el-tooltip
        class="item"
        effect="dark"
        content="删除一条记录"
        placement="top"
      >
        <i class="el-icon-remove-outline" @click="btnClick('delete')"></i>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="添加一条记录"
        placement="top"
      >
        <i class="el-icon-circle-plus-outline" @click="btnClick('add')"></i>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="移除该模块"
        placement="top"
      >
        <i
          class="el-icon-circle-close"
          v-if="showDelete"
          @click="btnClick('remove')"
        ></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import MyInput from '@/components/base/MyInput.vue'
export default {
  data() {
    return {}
  },
  props: {
    /**标题背景颜色 */
    backgroundColor: { type: String, default: '#062743' },
    /**标题背景颜色 是否可以更改 默认可以更改 随主题色变化 */
    backgroundColorChange: { type: Boolean, default: true },
    /**标题输入框的边框颜色 */
    borderColor: { type: String, default: '#fff' },
    /**图标的颜色 */
    iconColor: { type: String, default: 'black' },
    /**图标的名字 */
    iconName: { type: String, default: 'el-icon-school' },
    /**标题名 */
    title: { type: String, default: '标题' },
    /**是否展示工具栏 */
    showTool: { type: Boolean, default: true },
    /**字体颜色 */
    color: { type: String, default: 'white' },
    /**字体大小 */
    fontSize: { type: String, default: '16px' },
    /**标题的大小 */
    size: { type: String, default: 'normal' },
    /**标题的样式 */
    titleType: { type: String, default: 'title-01' },
    /**是否展示删除按钮图标 */
    showDelete: { type: Boolean, default: true },
    /**是否展示设置图标 */
    showSet: { type: Boolean, default: true },
    fontWeight:{
      type: String, default: 'bold' 
    }
  },
  computed: {
    // 输入框的宽度
    width() {
      if (this.size === 'small') {
        return '80px'
      } else if (this.size === 'normal') {
        return '120px'
      } else {
        return '200px'
      }
    },
    /**
     * 工具栏的字体大小 输入框高度也使用此高度
     */
    toolFontSize() {
      if (this.size === 'small') {
        return {fontSize:'23px'}
      } else if (this.size === 'normal') {
        return {fontSize:'30px'}
      } else {
        return {fontSize:'40px'}
      }
    },
    inputStyle() {
      return {
        width: this.width,
        fontWeight: this.fontWeight,
        backgroundColor: this.backgroundColor,
        border: 'none',
        color: this.color,
        fontSize: this.fontSize,
        lineHeight:1.5,
      }
    },
    inputValue: {
      get() {
        return this.title
      },
      set(val) {
        // 修改value值
        this.$emit('titleBValUpdate', val)
      },
    },
  },
  methods: {
    btnClick(tag) {
      // 通知父组件按钮被点击了
      this.$emit('btnClick', tag)
    },
  },
  components: {
    MyInput,
  },
}
</script>

<style scoped lang="less">
.title-01 {
  background-color: #062743;
  width: 100%;
  height: 35px;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item {
  margin: 4px;
}
.btn-box {
  padding-right: 25px;
  // color: #062743;
  color:transparent;
  display: flex;
  font-size: 30px;
  gap: 10px;
}
.btn-box:hover {
  color: #fff;
  cursor: pointer;
}
.btn-box-no-bgcolor {
  padding-right: 25px;
  color: #fff;
  display: flex;
  font-size: 30px;
  gap: 10px;
}

.btn-box-no-bgcolor:hover {
  color: black;
  cursor: pointer;
}

.rs-input-box {
  display: flex;
  align-items: center;

  .rs-icon-box {
    width: 30px;
    height: 30px;
    font-size: 30px;
    margin-right: 3px;
    margin-left: 5px;
    margin-bottom: 4px;
    margin-top: 5px;
  }

  .label-box {
    width: 40px !important;
  }

  .rs-input {
    width: 120px;
    height: 30px;
    // background-color: #062743;
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
  }

  .rs-input:focus {
    background: none;
    outline: none;
    border: 0px;
    border-width: 1px;
    border-color: #fff;
    border-style: dotted;
  }
}
</style>
